<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8">
	</head>

	<body>
		<div class="col-lg-12" id="detailType">
			<ol class="breadcrumb">
				<li><i class="fa fa-home"></i>
					<a href="index.html">Home</a>
				</li>
				<li><i class=""></i>查看类型</li>
			</ol>

			<div class="mcomment">
				<h3 class="page-header"><i class=""></i>查看类型</h3>

				<!--列表及操作-->
				<!--操作-->
				<div>
					<div class="row form-group form-inline">
						<div class="col-xs-3" style="background: white;">
							<button class="btn btn-default" data-toggle="modal" data-target="#AddType" @click="copyf">添加类型</button>

						</div>
						<!--类型搜索-->
						<div class="input-group col-xs-5">
							<span class="input-group-addon">
							<i class="fa fa-search"></i>
						</span>
							<input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索的类型" />
							<span class="input-group-btn">
							<button @click="searchType(searchBox)" class="btn btn-default">搜索</button>
						</span>
						</div>
						<!--类型搜索结束-->
						<!-------------------------------------------->
						<div class="col-xs-4 pull-right text-right" style="background: white;">
							<div class="input-group">
								<!--筛选-->
								<!--筛选选项-->
								<select v-model="faId" class="form-control">
									<option v-for="op in options" v-bind:value="op.faId">
										{{op.faName}}
									</option>
								</select>
								<span class="input-group-btn">
										<button @click="filter(faId)" class="btn btn-default">筛选</button>
									</span>
								<!--筛选结束-->
							</div>
							<!--操作结束-->
						</div>
					</div>
					<!--列表-->
					<div>
						<table class="table table-bordered table-hover table-responsive">
							<thead>
								<tr>
									<td>
										<strong>类型名称</strong>
									</td>
									<td>
										<strong>添加时间</strong>
									</td>
									<td>
										<strong>修改时间</strong>
									</td>
									<td>
										<strong>修改人</strong>
									</td>
									<td>
										<strong>父级类型</strong>
									</td>
									<td>
										<strong>操作</strong>
									</td>
								</tr>
							</thead>
							<tr v-for='TypeList in TypeLists'>
								<td>{{TypeList.laName}}</td>
								<td>{{TypeList.addTime}}</td>
								<td>{{TypeList.modifiTime}}</td>
								<td>{{TypeList.modifiName}}</td>
								<td>{{TypeList.faName}}</td>

								<td>
									<button data-toggle="modal" data-target="#showtype" class="btn btn-success" @click="show(TypeList.comId)">
										查看</button>
									<button data-toggle="modal" data-target="#modiftype" class="btn btn-warning" @click="modify1(TypeList.comId)">
										修改</button>
									<button class="btn btn-danger" @click="deleteType(TypeList.comId)">删除</button>
								</td>
							</tr>
						</table>
					</div>
					<!--列表结束-->

				</div>
				<!--列表及操作结束-->
				<!--分页导航-->
				<center>
					<ul class="pagination">
						<li>
							<a @click="getajax(1)">首页</a>
						</li>
						<li>
							<a @click="getajax(page-1)">上一页</a>
						</li>
						<li>
							<li v-for="value in showpage">
								<a style="background: red;" @click="getajax(value)" v-if="page==value">
									{{value}}
								</a>

								<a v-else @click="getajax(value)">{{value}}</a>

							</li>
						</li>
						<li>
							<a @click="getajax(page+1)">下一页</a>
						</li>
						<li>
							<a @click="getajax(countpage)">尾页</a>
						</li>
					</ul>
				</center>
				<!--分页导航结束-->
			</div>

			<!--添加弹出框 start-->
			<div class="modal" id="AddType">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>添加类型</h4>
						</div>
						<div class="modal-body">
							<table class="table">

								<tr>
									<th style="border: 0px;">选择父类</th>
									<!--选择父类-->
									<td>
										<select v-model="copyfaId" class="form-control">
											<option v-for="copyoption in copyoptions" v-bind:value="copyoption.faId">
												{{copyoption.faName}}
											</option>
										</select>
									</td>

								</tr>
								<tr>
									<th style="border: 0px;">类型名称</th>
									<td style="border: 0px;">
										<input type="text" class="form-control" v-model="tname" />
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<div class="form-group">
											<label for="noticeContent">备注：</label>

											<textarea v-model="note" class="form-control" id="noticeContent" cols="100%" rows="10"></textarea>
											</script>
										</div>

									</td>

								</tr>

							</table>
						</div>
						<div class="modal-footer">
							<button @click="addtype(copyfaId)" class="btn btn-primary">提交</button>
							<button class="btn btn-danger" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			<!--添加弹出框 end-->

			<!--查看弹出框 start-->
			<div class="modal" id="showtype">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>查看类型</h4>
						</div>
						<div class="modal-body">
                               <table class="table table-bordered">

								<tr>
									<td><label for="awardPersonName">类型名：</label></td>
                                        <td><input v-model="showt.laName" class="form-control " type="text" readonly="readonly" /></td>


								<tr>
									<td><label for="awardPersonName">最后修改时间：</label></td>
                                        <td><input v-model="showt.modifiTime" class="form-control " type="text" readonly="readonly" /></td>

								<tr>
									<td><label for="awardPersonName">添加时间：</label></td>
                                        <td><input v-model="showt.addTime" class="form-control " type="text" readonly="readonly" /></td>


								<tr>
									<td><label for="awardPersonName">修改人：</label></td>
                                        <td><input v-model="showt.modifiName" class="form-control " type="text" readonly="readonly" /></td>

								<tr>
									<td><label for="awardPersonName">父类名：</label></td>
                                        <td><input v-model="showt.faName" class="form-control " type="text" readonly="readonly" /></td>

								<tr>
									<td colspan="2">
									<div class="form-group">
									<label for="awardContent">备注：</label>
									<textarea disabled="disabled"  class="form-control" id="noticeContent" cols="100%" rows="10">
												{{showt.note}}
									</textarea>
									</div>
									</td>

								</tr>

							</table>

						</div>
						<!--查看内容区域结束-->

					</div>
				</div>
			</div>

			<!--查看弹出框 end-->


			<!--修改弹出框 start-->
			<div class="modal" id="modiftype">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
										</button>
										<h4>修改类型</h4>
						</div>
						<div class="modal-body">
							<table class="table">

								<tr>
									<th style="border: 0px;">选择父类</th>
									<!--选择父类-->
									<td>
										<select v-model="modifyt.faId" class="form-control">
											<option v-for="option in options" v-bind:value="option.faId">
												{{option.faName}}
											</option>
										</select>

									</td>

								</tr>
								<tr>
									<th style="border: 0px;">类型名称</th>
									<td style="border: 0px;">
										<input type="text" class="form-control" v-model="modifyt.laName" />
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<div class="form-group">
											<label for="noticeContent">备注：</label>
											<textarea v-model="modifyt.note" class="form-control" id="noticeContent" cols="100%" rows="10"></textarea>

											</script>
										</div>

									</td>

								</tr>

							</table>
						</div>
						<div class="modal-footer">
							<button @click="modify2(modifyt.faId,modifyt.comId)" class="btn btn-primary">提交</button>
							<button class="btn btn-danger" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>

			<!--修改弹出框 end-->

		</div>

		<script type="text/javascript">
			var url1 = 'http://donting.free.idcfengye.com';
			var ou = new Vue({
				el: '#detailType',
				data: {
					searchBox: '', //搜索框

					tname: '', //添加子类型名
					note: '', //添加备注

					copyfaId: '',
					copyoptions: [],

					faId: '1', //父类列表
					options: [],

					TypeLists: [], //子类列表

					count: '10', //总记录数
					countpage: '2', //总页数
					page: '1', //当前页
					showpage: [],

					showt: {}, //查看子类型
					modifyt: {}, //修改子类型

				},
				methods: {

					copyf: function() {
						ou.copyoptions = ou.options;
						ou.copyfaId = ou.faId;

					},
					addtype: function(id) {

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/addtypeD', {　　
							params: {
								'laName': ou.tname,
								'subclass': id, //父类id
								'note': ou.note,
							}
						}).then(function(response) {
							let rs = response.data;
							if(rs.code == 200) {
								ou.getajax(1);
								alert("添加成功");
							} else if(rs.code==119){
								alert(rs.message);
								document.location = "login.html";
							}else{
								alert(rs.message);
							}

						}).catch(function(error) {　　
							alert("aaaa连接超时！");
						});
					},
					filter: function(id) {
						//得到父类类型id
						alert(id);
					},
					modify2: function(faId,comId) {

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/updatetypeD', {　　
							params: {
								'laName': ou.modifyt.laName,
								'note': ou.modifyt.note,
								'comId': comId,
								'subclass': faId,
								'addTime' : ou.modifyt.addTime
							}
						}).then(function(response) {
							let rs = response.data;

							　　
							if(rs.code == 200) {
								ou.getajax(1);
								alert("修改成功");
							} else {
								alert("修改失败");
							}

						}).catch(function(error) {　　
							alert("连接超时！");
						});
					},

					deleteType: function(id) {
						let comId = id;

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/deletetype', {　
							params: {
								'comId': comId
							}
						}).then(function(response) {
							let rs = response.data;

							if(rs.code == 200) {

								alert("删除成功!");
								ou.getajax(1);
							} else {
								alert("删除失败!");
							}

						}).catch(function(error) {　　
							alert("连接超时！");
						});

					},
					searchType: function(searchBox) {
						alert(searchBox);
					},
					show: function(id) {

						for(var i = 0; i < ou.TypeLists.length; i++) {
							if(id == ou.TypeLists[i].comId) {
								ou.showt = ou.TypeLists[i];
								return;

							}

						}

					},
					modify1: function(id) {
						for(var i = 0; i < ou.TypeLists.length; i++) {
							if(id == ou.TypeLists[i].comId) {
								ou.modifyt = ou.TypeLists[i];

								return;

							}

						}

					},

					getajax: function(page) {
						if(page <= 0) {
							alert("没有上一页");
							return;
						}
						if(page > this.countpage) {
							alert("没有下一页了");
							return;
						}

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/alltype', {
							params: {
								'page': page,
							}
						}).then(function(response) {
							let rs = response.data;　

							if(rs.code == 4003) {
								alert("无数据");
								return;
							}

							ou.countpage = rs.countpage;
							ou.page = rs.page;
							ou.count = rs.count;
							ou.TypeLists = rs.data;

							var cout = 0;
							var pa = [];
							if(rs.page <= 3) {

								for(var i = 1; i <= ou.countpage && cout < 5; i++) {
									pa.push(i);
									cout++;
								}

							} else {

								if(rs.countpage - rs.page >= 2) {
									pa.push(rs.page - 2);
									pa.push(rs.page - 1);
									pa.push(rs.page);
									pa.push(rs.page + 1);
									pa.push(rs.page + 2);
								} else {
									pa.push(rs.countpage - 4);
									pa.push(rs.countpage - 3);
									pa.push(rs.countpage - 2);
									pa.push(rs.countpage - 1);
									pa.push(rs.countpage);

								}

							}
							ou.showpage = pa;

						}).catch(function(error) {　　
							alert("连接超时！");
						});

					},

					getftype: function() {
						//发送get请求
						axios.defaults.withCredentials = true;

						axios.get(url1 + '/type/prtype', {　}).then(function(response) {
							var gf = response.data;

							　　
							if(gf.code == 200) {
								ou.options = gf.data;
								ou.faId = gf.data[0].faId;

							} else {
								alert("获取父类类型失败");
							}

						}).catch(function(error) {　　
							alert("fulei连接超时！");
						});

					}

				},
				mounted() {
					this.getajax(1);
					this.getftype();
				}

			})
		</script>

	</body>

</html>